<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <script src="./vue3.js"></script>
  <div id="app" align="center">
    <div>
    <p>商品编号：<input type="text" v-model="id"></p>
    <p>商品名称：<input type="text" v-model="name"></p>
    <p>商品单价：<input type="text" v-model="price"></p>
    <p>商品数量：<input type="text" v-model="num"></p>
    <button @click="addGood">添加商品</button>
  </div>
  <hr>
  <div>
    请输入关键字：<input type="text" v-model="keyword">
    <button @click="searchGoods">搜索商品</button>
  </div>
  <hr>
  <div v-if="goods.length!=0">
    <table border="1">
      <tr>
        <th>编号</th>
        <th>
          全选 <input type="checkbox" v-model="isAll" @change="selectAll">
          商品名称
        </th>
        <th>商品单价</th>
        <th>商品数量</th>
        <th>操作</th>
      </tr>
          <tr v-for="(item,index) in goods" :class="{mybgcolor:(index+1)%2==0}">
      <td>{{item.id}}</td>
      <td>
        <input type="checkbox" v-model="cklist" v-bind:value="item" @change="itemChange">
        {{item.name}}
      </td>
      <td>{{item.price}}</td>
      <td>
        <button @click="item.num--" v-bind:disabled="item.num==1">-</button>
        {{item.num}}
        <button v-on:click="item.num++">+</button>
      </td>
      <td><button @click="deleteGood(index)">移除</button></td>
    </tr>
  </table>
  购物车商品总价：￥{{totalPrice}}元
</div>
<div v-else>
  购物车为空
</div>
</div>
<script>
  const comApp = Vue.createApp({
    data() {
      return {
        goods: [
          {
            id: 1,
            name: "华为手机",
            price: 3688,
            num: 1
          },
          {
            id: 2,
            name: "苹果手机",
            price: 5688,
            num: 1
          },
                  {
          id: 2,
          name: "苹果手机",
          price: 5688,
          num: 1
        },
        {
          id: 3,
          name: "小米手机",
          price: 1688,
          num: 1
        }
      ],
      id: "",
      name: "",
      price: "",
      num: "",
      keyword: "", 
      isAll: false,
      cklist: [] 
    }
  },
  computed: { 
    totalPrice() {
      var total = 0;
      this.goods.forEach((item) => {
        total += item.price * item.num;
      });
      return total;
    }
  },
  methods: {
  deleteGood(index) { 
    this.goods.splice(index, 1);
  },
  addGood() {
    this.goods.push({
      id: this.id,
      name: this.name,
      price: this.price,
      num: this.num
    });
  },
  searchGoods() {
    var newArr = []; 
    this.goods.forEach((item) => {
      if (item.name.indexOf(this.keyword) != -1) {
        newArr.push(item);
      }
    });
    this.goods = newArr.slice();
  },
  selectAll() {
    if (this.isAll) {
      this.cklist = this.goods.slice();
    } else {
      this.ckList = [];
    }
  },
      itemChange() {
        if (this.cklist.length == this.goods.length) {
          this.isAll = true;
        } else {
          this.isAll = false;
        }
      }
    }
  }).mount("#app");
</script>
</body>
</html>